<!-- 领养申请页面 -->
<template>
  <div class="adopt-box">
    <div class="adopt-table">
      <el-table :data="currentPageData" border style="width: 100%">
        
        <el-table-column prop="applicantId" label="领养人ID" />
        <el-table-column prop="petName" label="宠物名字" />
        <el-table-column prop="reason" label="领养原因" />

        <!-- 图片列 -->
        <el-table-column label="领养证明">
          <template #default="scope">
            <div v-for="(url, index) in scope.row.imageUrls" :key="index" class="image-container">
              <img :src="url" alt="宠物图片" class="pet-image" />
            </div>
          </template>
        </el-table-column>
        
        <!-- 操作列 -->
        <el-table-column label="操作">
          <template #default="scope">
            <el-button 
              type="primary" 
              plain
              size="small"
              @click="handleAgree(scope.row)"
            >
              通过
            </el-button>
            <el-button 
              type="primary" 
              plain
              size="small"
              @click="handleReject(scope.row)"
            >
              拒绝
            </el-button>
            
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container" >
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[4]"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="total"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/stores/user";
import {getAdoptApplicationAPI,AdoptApplicationYesAPI,AdoptApplicationNoAPI} from "@/api/user"
import { ElMessage, ElPagination } from 'element-plus'
import {onMounted, ref, computed} from "vue"

// 获取用户ID-用于申请列表接口
const userStore = useUserStore();
const userID = userStore.user.user_id;

// 分页相关变量
const currentPage = ref(1); // 当前页码
const pageSize = ref(4); // 每页显示数量
const total = ref(0); // 总数据量

// 待审核的领养申请列表
const adoptApplicationList = ref([]);

// 计算当前页数据
const currentPageData = computed(() => {
const start = (currentPage.value - 1) * pageSize.value;
return adoptApplicationList.value.slice(start, start + pageSize.value);
});

const getAdoptApplication = async() => {
  const res = await getAdoptApplicationAPI(userID);
  adoptApplicationList.value = res.data.items;
  total.value = res.data.items.length; 
  console.log(adoptApplicationList.value)
}

onMounted(() => {
  getAdoptApplication();
});

// 通过按钮-表示通过领养审核
const handleAgree = async (row: any) => {
  console.log('通过:', row.id);
  //调用申请通过接口
  const res = await AdoptApplicationYesAPI(row.id);
  console.log(res);
  if (res.message === "成功") {
      ElMessage.success("该宠物的领养申请已通过");
      // 刷新数据
      getAdoptApplication();
      
  } else {
      ElMessage.error("操作失败");
  }
};

// 拒绝按钮-表示不通过领养审核
const handleReject = async (row: any) => {
  console.log("拒绝:", row.id);
  // 调用申请不通过接口
  const res = await AdoptApplicationNoAPI(row.id);
  console.log(res);
  if (res.message === "成功") {
      ElMessage.error("该宠物的领养申请已拒绝");
      // 刷新数据
      getAdoptApplication();
  } else {
      ElMessage.error("操作失败");
  }
}

// 分页器事件处理
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize;
  currentPage.value = 1; // 切换每页数量后回到第一页
  getAdoptApplication(); // 重新获取数据
};

const handleCurrentChange = (newPage: number) => {
currentPage.value = newPage;
};
</script>

<style lang="scss" scoped>
.adopt-box {
  width: 970px;
  margin-left: 30px;
  background: #FAFAFA;
  // border: 1px solid black;
  min-height: 400px; /* 添加最小高度防止内容过少时布局塌陷 */
  position: relative;
}

.adopt-table{
  padding: 10px;
}

/* 分页器样式*/
.pagination-container {
margin-top: 20px;
text-align: right; /* 分页器居右显示 */
padding: 10px;
}


.image-container {
display: inline-block;
margin-right: 3px; 
max-width: 100px; 
max-height: 70px; 
overflow: hidden; 
}

.pet-image {
width: 100%;
height: 100%;
object-fit: cover; 
border-radius: 4px; 
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}
</style>